import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import { LinkContainer } from 'react-router-bootstrap'
import Leibie from './component/Leibie.js'
import Dingdan from './component/Dingdan.js'
import Caiping from './component/Caiping.js'

class App extends Component {

  state = {
    isBlock: false
  }

  isOpen=()=>{
    this.setState({
      isBlock: !this.state.isBlock
    })
  }

  render() {
    return (
      <Router>
      <div>
        <header className="main-header">
          <a href="" className="logo">
            <span className="logo-mini"><b>A</b>LT</span>
            <span className="logo-lg"><b>订餐系统</b></span>
          </a>
          <nav className="navbar navbar-static-top" role="navigation">
            <a href="#" className="sidebar-toggle" data-toggle="push-menu" role="button">
              <span className="sr-only">Toggle navigation</span>
            </a>
          </nav>
        </header>
        <aside className="main-sidebar">
          <section className="sidebar">
            <ul className="sidebar-menu" data-widget="tree">
              {/* <li className="header">菜单</li> */}
                <li className="active treeview" className={this.state.isBlock ? 'menu-open' : ''}>
                  <a href="javascript:;" onClick={this.isOpen}>
                  <i className="fa fa-laptop"></i>
                  <span>菜单</span>
                  <span className="pull-right-container">
                    <i className="fa fa-angle-left pull-right"></i>
                  </span>
                </a>
                  <ul className="treeview-menu" style={{display: this.state.isBlock ? 'block' : 'none'}}>

                    <LinkContainer exact to='/' >
                    <li>
                      <a href="javascript;:">
                      <i className="fa fa-circle-o"></i>
                      <span>类别管理</span>
                      </a>
                    </li>
                    </LinkContainer>

                    <LinkContainer exact to='/Caiping' >
                    <li>
                      <a href="javascript;:">
                      <i className="fa fa-circle-o"></i>
                      <span>菜品管理</span>
                      </a>
                    </li>
                    </LinkContainer>

                    <LinkContainer exact to='/Dingdan' >
                    <li>
                      <a href="javascript;:">
                      <i className="fa fa-circle-o"></i>
                      <span>订单管理</span>
                      </a>
                    </li>
                    </LinkContainer>
                  </ul>
              </li>

              {/* <LinkContainer exact to='/' >
                <li>
                  <a href="javascript;:">
                  <span>类别管理</span></a>
                </li>
              </LinkContainer>

              <LinkContainer exact to='/Caiping' >
                <li>
                  <a href="javascript;:"><span>菜品管理</span></a>
                </li>
              </LinkContainer>
              <LinkContainer exact to='/Dingdan' >
                <li>
                  <a href="javascript;:"><span>订单管理</span></a>
                </li>
              </LinkContainer>  */}
            </ul>
          </section>
        </aside> 
 
        <div className="content-wrapper">
          <Route path="/Leibie" component={Leibie} />
          <Route path="/Caiping" component={Caiping} />
          <Route path="/Dingdan" component={Dingdan} />
          <Route exact path="/" component={Leibie} />
        </div> 

        <footer className="main-footer">
          <div className="pull-right hidden-xs">
            Anything you want
            </div>
          <strong>Copyright &copy; 2016 <a href="#">Company</a>.</strong> All rights reserved.
          </footer>
      </div>
      </Router>
    );
  }
}

export default App;
